<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .m {
            display: flex;
            width: 100%;
            justify-content: space-around;
            margin-top: 100px;
            flex-wrap: wrap;
        }

        .dv {
            width: 13%;
            height: 400px;
            /* background-color: saddlebrown; */
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            color: #fff;
            transition: all 2s;
            cursor: pointer
        }

        .border {
            width: 400px;
            height: 400px;
            /* background-color: saddlebrown; */
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
            color: #fff;
            transition: all 2s;
            cursor: pointer
        }

        /* div:last-child:nth-child(7n) {
            margin-right: 66%;
        } */

        span {
            transform: rotateY(-180deg);
            width: 95%;
            height: 95%;
            justify-content: center;
            align-items: center;
            display: none;
            background-size: 100% 100%;
        }

        p {
            width: 100%;
            height: 100%;
            background: url('./img/back.png');
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <i>保底抽卡：70次保底一张橙卡,35次保底一张紫卡，21次保底一张蓝卡。</i>
    <button disabled id="choujiang">一键抽奖</button>
    余额：<button id="jine" disabled>0</button>
    <button id="chongzhi">充值</button>
    <main class="m">
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
        <div class="dv">
            <div class="border">
                <span></span>
            </div>
            <p></p>
        </div>
    </main>
    <script src="./cardUrl.js"></script>
    <script>
        function IsPhone() {
            //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
            var info = navigator.userAgent;
            //通过正则表达式的test方法判断是否包含“Mobile”字符串
            var isPhone = /mobile/i.test(info);
            //如果包含“Mobile”（是手机设备）则返回true
            return isPhone;
        }
        let Phone = IsPhone()

        let arr = ['橙卡武将', '紫卡武将', '蓝卡武将', '绿卡武将', '绿卡武将', '白卡武将', '白卡武将']
        let newArr = []
        let pre = 10000
        let dom = document.getElementsByClassName('dv')
        let border = document.getElementsByClassName('border')
        console.log(border, 'bbbbbbbbb')
        let span = document.getElementsByTagName('span')
        let p = document.getElementsByTagName('p')
        let chongzhi = document.getElementById('chongzhi')
        let jine = document.getElementById('jine')
        let choujiang = document.getElementById('choujiang')
        let btn = document.getElementsByTagName('button')[0]
        let m = document.getElementsByClassName('m')[0]

        let fl = false
        let ck = false
        let a = 0
        let b = 0
        let c = 0
        // console.log(dom)
        // console.log(btn)
        // console.log(chongzhi)
        let conArr = []
        let all = false
        if (Phone) {
            console.log(1)
            m.style
            for (let i = 0; i < dom.length; i++) {

                dom[i].style.width = '33%'
                dom[i].style.height = '200px'

                console.log(dom[i].style)
                if (i == dom.length - 1) {
                    dom[i].style.marginRight = '66%'
                }

            }
        } else {

            for (let i = 0; i < dom.length; i++) {
                dom[i].style.width = '13%'
                dom[i].style.height = '400px'
            }
        }
        for (let i = 0; i < dom.length; i++) {
            dom[i].onclick = function () {
                // console.log(dom[i])
                // console.log(all)
                if (ck) {
                    return
                } else {
                    if (conArr.length == dom.length || all == true) {
                        // console.log('123123123')
                        for (let j = 0; j < dom.length; j++) {
                            dom[j].style.transition = 'all 0s';
                            dom[j].style.transform = 'rotateY(' + 360 + 'deg)';
                            span[j].style.display = 'none'
                            border[j].style.display = 'none'
                            p[j].style.display = 'block'
                            all = false
                        }
                        conArr = []
                    } else {
                        span[i].style.color = '#fff'

                        // console.log(11)
                        if (pre != 0) {
                            pre -= 100
                            jine.innerHTML = pre
                            a += 1
                            b += 1
                            c += 1

                            if (conArr.indexOf(i) == -1) {
                                conArr.push(i)
                                let random = parseInt(Math.random() * 1000)
                                setTimeout(() => {
                                    dom[i].style.transition = 'all 2s';

                                    dom[i].style.transform = 'rotateY(' + 180 + 'deg)';



                                }, 500)
                                setTimeout(() => {
                                    border[i].style.display = 'flex'
                                    span[i].style.display = 'block'
                                    if (a >= 70) {
                                        // span[i].innerHTML = arr[0]
                                        // span[i].style.color = 'sandybrown'
                                        let url = cardType(arr[0])
                                        span[i].style.backgroundImage = `url(${url})`
                                        a = 0
                                    } else if (b >= 35) {
                                        // span[i].innerHTML = arr[1]
                                        // span[i].style.color = 'purple'
                                        let url = cardType(arr[1])
                                        span[i].style.backgroundImage = `url(${url})`

                                        b = 0
                                    } else if (c >= 21) {
                                        // span[i].innerHTML = arr[2]
                                        // span[i].style.color = 'blue'
                                        let url = cardType(arr[2])
                                        span[i].style.backgroundImage = `url(${url})`

                                        c = 0
                                    } else {

                                        if (random > 0 && random <= 10) {

                                            if (a < 49) {
                                                // span[i].innerHTML = arr[6]
                                                // span[i].style.color = '#fff'
                                                let url = cardType(arr[6])
                                                span[i].style.backgroundImage = `url(${url})`
                                            } else {
                                                // span[i].innerHTML = arr[0]
                                                // span[i].style.color = 'sandybrown'
                                                let url = cardType(arr[0])
                                                span[i].style.backgroundImage = `url(${url})`


                                            }

                                        }
                                        if (random > 10 && random <= 30) {

                                            if (b < 21) {
                                                // span[i].innerHTML = arr[5]
                                                // span[i].style.color = '#fff'
                                                let url = cardType(arr[5])
                                                span[i].style.backgroundImage = `url(${url})`
                                            } else {
                                                // span[i].innerHTML = arr[1]
                                                // span[i].style.color = 'purple'
                                                let url = cardType(arr[1])
                                                span[i].style.backgroundImage = `url(${url})`


                                            }


                                        }
                                        if (random > 30 && random <= 100) {
                                            if (c < 14) {
                                                // span[i].innerHTML = arr[5]
                                                let url = cardType(arr[5])
                                                span[i].style.backgroundImage = `url(${url})`
                                            } else {
                                                // span[i].innerHTML = arr[2]
                                                // span[i].style.color = 'blue'
                                                let url = cardType(arr[2])
                                                span[i].style.backgroundImage = `url(${url})`

                                            }


                                        }
                                        if (random > 100 && random <= 200) {
                                            // span[i].innerHTML = arr[3]
                                            // span[i].style.color = 'green'
                                            let url = cardType(arr[3])
                                            span[i].style.backgroundImage = `url(${url})`

                                        }
                                        if (random > 200 && random <= 350) {
                                            // span[i].innerHTML = arr[4]
                                            // span[i].style.color = 'green'
                                            let url = cardType(arr[4])
                                            span[i].style.backgroundImage = `url(${url})`

                                        }
                                        if (random > 350 && random <= 550) {
                                            // span[i].innerHTML = arr[5]
                                            // span[i].style.color = '#fff'
                                            let url = cardType(arr[5])
                                            span[i].style.backgroundImage = `url(${url})`

                                        }
                                        if (random > 550 && random <= 1000) {
                                            // span[i].innerHTML = arr[6]
                                            // span[i].style.color = '#fff'
                                            let url = cardType(arr[6])
                                            span[i].style.backgroundImage = `url(${url})`

                                        }
                                    }
                                    p[i].style.display = 'none'
                                    // setTimeout(() => {
                                    //     ck = false
                                    // }, 800)
                                }, 1100);


                                // console.log(a, b, c)
                            }
                        } else {
                            alert("充钱吧，充钱使你变强，使你成为最亮的仔")
                        }

                    }
                }

                // console.log(conArr)
                // console.log(a, '单抽a')
                // console.log(b, '单抽b')
                // console.log(c, '单抽c')
            }
        }
        setInterval(() => {
            if (ck) {
                choujiang.disabled = true
            } else {
                if (pre < (dom.length * 100 - conArr.length * 100)) {
                    choujiang.disabled = true
                } else {
                    choujiang.disabled = false
                }
            }
        }, 0)
        chongzhi.onclick = function () {
            pre += 500
            jine.innerHTML = pre
        }
        btn.onclick = function () {

            ck = true

            if (fl || conArr.length == dom.length) {
                reset()
            }
            fl = true
            setTimeout(() => {
                fn()
            }, 500)
        }



        function reset() {

            for (let i = 0; i < dom.length; i++) {
                dom[i].style.transition = 'all 0s';
                if (conArr.length === dom.length) {
                    // console.log(i, 'i')
                    // console.log(conArr, 'ccc')
                    dom[i].style.transform = 'rotateY(' + 360 + 'deg)';
                    p[i].style.display = 'block'
                    span[i].style.display = 'none'
                    border[i].style.display = 'none'
                    span[i].style.color = '#fff'
                }
                if (conArr.indexOf(i) == -1) {
                    // console.log(i, 'i')
                    // console.log(conArr, 'ccc')
                    dom[i].style.transform = 'rotateY(' + 360 + 'deg)';
                    p[i].style.display = 'block'
                    span[i].style.display = 'none'
                    border[i].style.display = 'none'
                    span[i].style.color = '#fff'
                }

                // console.log(1)
            }

        }

        function fn() {

            if (pre != 0) {
                pre -= 700 - (100 * conArr.length)
            }
            jine.innerHTML = pre
            a += dom.length - conArr.length
            b += dom.length - conArr.length
            c += dom.length - conArr.length

            for (let i = 0; i < dom.length; i++) {
                // console.log(conArr)
                let random = parseInt(Math.random() * 1000)
                setTimeout(() => {
                    dom[i].style.transition = 'all 2s';
                    dom[i].style.transform = 'rotateY(' + 180 + 'deg)';

                }, 500)
                setTimeout(() => {
                    border[i].style.display = 'flex'
                    span[i].style.display = 'flex'
                    if (a >= 70) {
                        if (conArr.indexOf(i) == -1) {
                            let url = cardType(arr[0])
                            span[i].style.backgroundImage = `url(${url})`
                            // span[i].style.color = 'sandybrown'
                            a = 0
                        }
                    } else if (b >= 35) {
                        if (conArr.indexOf(i) == -1) {
                            // span[i].innerHTML = arr[1]
                            // span[i].style.color = 'purple'
                            let url = cardType(arr[1])
                            span[i].style.backgroundImage = `url(${url})`
                        }


                        b = 0
                    } else if (c >= 21) {
                        if (conArr.indexOf(i) == -1) {
                            // span[i].innerHTML = arr[2]
                            // span[i].style.color = 'blue'
                            let url = cardType(arr[2])
                            span[i].style.backgroundImage = `url(${url})`

                            c = 0
                        }
                    } else {

                        if (random > 0 && random <= 10) {

                            if (a < 49) {

                                if (conArr.indexOf(i) == -1) {
                                    // span[i].innerHTML = arr[6]
                                    // span[i].style.color = '#fff'
                                    let url = cardType(arr[6])
                                    span[i].style.backgroundImage = `url(${url})`
                                }
                            } else {

                                if (conArr.indexOf(i) == -1) {
                                    // span[i].innerHTML = arr[0]
                                    // span[i].style.color = 'sandybrown'
                                    let url = cardType(arr[0])
                                    span[i].style.backgroundImage = `url(${url})`
                                }


                            }

                        }
                        if (random > 10 && random <= 30) {

                            if (b < 21) {

                                if (conArr.indexOf(i) == -1) {
                                    // span[i].innerHTML = arr[5]
                                    // span[i].style.color = '#fff'
                                    let url = cardType(arr[5])
                                    span[i].style.backgroundImage = `url(${url})`
                                }
                            } else {
                                if (conArr.indexOf(i) == -1) {
                                    // span[i].innerHTML = arr[1]
                                    // span[i].style.color = 'purple'
                                    let url = cardType(arr[1])
                                    span[i].style.backgroundImage = `url(${url})`
                                }




                            }


                        }
                        if (random > 30 && random <= 100) {
                            if (c < 14) {

                                if (conArr.indexOf(i) == -1) {
                                    // span[i].innerHTML = arr[5]
                                    // span[i].style.color = '#fff'
                                    let url = cardType(arr[5])
                                    span[i].style.backgroundImage = `url(${url})`
                                }
                            } else {
                                if (conArr.indexOf(i) == -1) {
                                    // span[i].innerHTML = arr[2]
                                    // span[i].style.color = 'blue'
                                    let url = cardType(arr[2])
                                    span[i].style.backgroundImage = `url(${url})`
                                }


                            }


                        }
                        if (random > 100 && random <= 200) {

                            if (conArr.indexOf(i) == -1) {
                                // span[i].innerHTML = arr[3]
                                // // console.log("greengreengreen1")
                                // span[i].style.color = 'green'
                                let url = cardType(arr[3])
                                span[i].style.backgroundImage = `url(${url})`
                            }
                        }
                        if (random > 200 && random <= 350) {

                            if (conArr.indexOf(i) == -1) {
                                // span[i].innerHTML = arr[4]
                                // // console.log("greengreengreen2")
                                // span[i].style.color = 'green'
                                let url = cardType(arr[4])
                                span[i].style.backgroundImage = `url(${url})`
                            }
                        }
                        if (random > 350 && random <= 550) {

                            if (conArr.indexOf(i) == -1) {
                                // span[i].innerHTML = arr[5]
                                // span[i].style.color = '#fff'
                                let url = cardType(arr[5])
                                span[i].style.backgroundImage = `url(${url})`
                            }

                        }
                        if (random > 550 && random <= 1000) {
                            if (conArr.indexOf(i) == -1) {
                                // span[i].innerHTML = arr[6]
                                // span[i].style.color = '#fff'
                                let url = cardType(arr[6])
                                span[i].style.backgroundImage = `url(${url})`
                            }


                        }
                    }
                    p[i].style.display = 'none'
                    setTimeout(() => {
                        ck = false
                        conArr = []
                    }, 800)
                    // if (conArr.indexOf(i) == -1) {
                    //     conArr.push(i)
                    // }
                    all = true

                }, 1100);





            }
            // console.log(a, '一键a')
            // console.log(b, '一键b')
            // console.log(c, '一键c')


        }

        function cardType(type) {
            //判断是哪种类型卡片
            switch (type) {
                case '白卡武将':
                    let whiteRandom = parseInt(Math.random() * whiteCard.length)
                    return whiteCard[whiteRandom].url
                    break;
                case '蓝卡武将':
                    let blueRandom = parseInt(Math.random() * blueCard.length)
                    return blueCard[blueRandom].url
                    break;
                case '绿卡武将':
                    let greenRandom = parseInt(Math.random() * greenCard.length)
                    return greenCard[greenRandom].url
                    break;
                case '紫卡武将':
                    let purpleRandom = parseInt(Math.random() * purpleCard.length)
                    return purpleCard[purpleRandom].url
                    break;
                case '橙卡武将':
                    let orangeRandom = parseInt(Math.random() * orangeCard.length)
                    return orangeCard[orangeRandom].url
                    break;
            }
        }
    </script>
</body>

</html>